<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .fosButton{
            width: auto;
            height: 70px;
            background: #1E9FFF;
            border: 1px solid #1E9FFF;
            color: #fff;
            padding: 10px;
        }
        .fosButton:hover{
            background: #8b0000;
            border: 1px solid #8b0000;
        }

        .cfosButtom{
            margin-top: 15px;
            width: 70%;
        }
        .cfosButtom button{
            width: auto;
            height: 70px;
            padding: 10px;
            margin: 7px;
        }
    </style>

</head>
<body>


<script src="../js/jquery.min.js"></script>
<script src="../js/fos.tree.js"></script>
<script src="../js/vue.min.js"></script>

<div id="fosVm">
    <button class="fosButton" @click="getNodes('computer science')">computer science</button>
    <button class="fosButton">genetics</button>

    <div class="cfosButtom">
        <button v-for="(ff, index) in cfos" @click="getNodes(ff.name)">{{ff.name}}</button>
    </div>

</div>

<script>
    // $.get("fos.json",function (data) {
    //     var t = toTree(data);
    //     debugger;
    // })

    var url = "https://academic.microsoft.com/api/search/GetEntityResults";


    $.ajax({
        url: url,
        data: {
            'Query': "Composite(te(F.FN ==  == 'machine learning')",
            'Filters': "Pt = '2'",
            'Limit':8,
            'Offset':0,
            'OrderBy':'',
            'SortAscending': 'false'
        },
        dataType: "json",
        method: "post",
        async: false,
        headers: {
            "content-type": "application/x-www-form-urlencoded"
        },
        success: function (result) {
           debugger;
        }
    });

    var kingVue = new Vue({
        el: '#fosVm',
        data: {
            cfos: [],
            allData: []
        },
        mounted: function () {
            var that = this;
            $.get("fos.json",function (data) {
                that.allData = data;
            });
        },
        methods: {
            getNodes: function (name) {
                this.cfos = toTreeOne(name,this.allData);
            }
        }
    });

</script>
</body>
</html>